<template>
  <div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
    >
      <el-table-column
        prop="childrenName"
        label="幼儿姓名"
        align="center"
      />
      <el-table-column
        label="性别"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.gender === 0 ? '女' : '男' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="生日"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ formatTime(scope.row.birthday, 'yyyy/MM/dd') }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="身高(cm)"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.height/10 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="体重(kg)"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.weight/10 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="坐位体前屈(cm)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[1].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[1].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[1].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[1].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="立定跳远(cm)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[2].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[2].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[2].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[2].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="网球掷远(m)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[3].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[3].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[3].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[3].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="双脚连续跳(s)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[4].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[4].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[4].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[4].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="10米折返跑(s)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[5].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[5].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[5].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[5].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="走平衡木(s)"
        align="center"
      >
        <template slot-scope="scope">
          <div class="column" :class="scope.row.rels[6].rankVal === 1 ? 'red-font':''">
            <div class="measureValue">
              {{ scope.row.rels[6].measureValue }}
            </div>
            <div class="rank">
              <div>
                {{ scope.row.rels[6].rankVal }}分
              </div>
              <div>
                {{ scope.row.rels[6].rankStr }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small"><span @click="download(scope.row.id)">下载</span></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { evaluateExport, getRecord } from '../api'
import { formatISODate, formatDate } from '@/utils/util'
export default {
  data () {
    return {
      tableData: [],
      loading: false
    }
  },
  mounted () {
    console.log(this.$route.query)
    this.getClassRecord(this.$route.query.id)
  },
  methods: {
    getClassRecord (evaluateRecordId) {
      this.loading = true
      this.tableData = []
      getRecord(evaluateRecordId).then(res => {
        this.loading = false
        this.tableData = res.records
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    // 下载个人报告
    download (reportId) {
      const params = {
        recordId: this.$route.query.id,
        reportId: reportId
      }
      evaluateExport(params).then(res => {
        this.downloadFile(res)
      })
    },
    // 下载函数
    downloadFile (url) {
      const iframe = document.createElement('iframe')
      iframe.style.display = 'none' // 防止影响页面
      iframe.style.height = 0 // 防止影响页面
      iframe.src = url
      document.body.appendChild(iframe)
      // 5分钟之后删除
      setTimeout(() => {
        iframe.remove()
      }, 5 * 60 * 1000)
    },

    formatTime (time, fmt) {
      const date = formatISODate(time)
      return formatDate(new Date(date), fmt)
    }
  }
}
</script>

<style scoped lang="scss">
.column{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

.measureValue{
  font-size: 20px;
  width: 70px;
  /*background: #ff00ff;*/
}

.rank{
  margin-left: 10px;
  font-size: 14px;
  width: 50px;
  /*background: #ff00ff;*/
}
}

.red-font {
  color: #F97811;
}
</style>
